<template>

    <el-form :inline="true" style="margin-top: 20px;" :model="form" label-width="auto">
        <el-form-item label="货物名称">
            <el-input v-model="form.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="材质">
            <el-select v-model="form.material" placeholder="请选择" style="width:200px">
                <el-option label="请选择" :value="-1"></el-option>
                <el-option label="金属" :value="0"></el-option>
                <el-option label="橡胶" :value="1"></el-option>
                <el-option label="塑料" :value="2"></el-option>
                <el-option label="液体" :value="3"></el-option>
                <el-option label="纸质" :value="4"></el-option>
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="reset()">重置</el-button>
        </el-form-item>

    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="goods_name" label="货物名称" />
        <el-table-column prop="" label="类型">
            <template #default="scope">
                <el-if v-if="scope.row.type == 0">
                    车辆用品</el-if>
                <el-if v-else-if="scope.row.type == 1">
                    办公用品</el-if>
            </template>
        </el-table-column>
        <el-table-column prop="" label="材质">
            <template #default="scope">
                <el-if v-if="scope.row.material == 0">
                    金属</el-if>
                <el-if v-else-if="scope.row.material == 1">
                    橡胶</el-if>
                <el-if v-else-if="scope.row.material == 2">
                    塑料</el-if>
                <el-if v-else-if="scope.row.material == 3">
                    液体</el-if>
                <el-if v-else-if="scope.row.material == 4">
                    纸质</el-if>
            </template>
        </el-table-column>
        <el-table-column prop="specification" label="规格">
        </el-table-column>

        <el-table-column prop="purchaseAmount" label="期间采购数量" />
        <el-table-column prop="acceptance_Num" label="期间领用数量" />
        <el-table-column prop="surplusNum" label="期末结余数量" />
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
            :page-sizes="[1, 2, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '../../../api/http'
import { useRoute } from 'vue-router'
const route = useRoute()

onMounted(() => {
    getList();
})

const form = reactive({
    goods_name: '',
    material: -1,
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0,
})
//重置
const reset = () => {
    form.goods_name = '';
    form.material = -1;
    form.PageIndex = 1;
    form.PageSize = 10;
    getList();
}


//分页
const handleSizeChange = (val: number) => {
    form.PageSize = val;
    getList();
}
const handleCurrentChange = (val: number) => {
    form.PageIndex = val;
    getList();
}

const tableData = ref([]);

const getList = () => {
    axios.post('/setpath/api/Acceptance/AcctanceTotal', form).then(res => {
        // 使用 res.data 获取实际响应数据
        tableData.value = res.result.data;
        form.totalCount = res.result.totalCount;
        form.pageCount = res.result.pageCount;
    }).catch(error => {
        console.log(error)
    });
}

</script>